<template>
	<view>
		<view class="hr-box">
			<view class="top-box">
				<image :src="user.member.portrait"></image>
				<view class="line"></view>
				<view class="name">{{user.member.name}}</view>
				<view class="txt">
					{{user.company.title}}
					<text class="inline-block text-center" style='width:20rpx;'>·</text>
					{{user.member.post}}
				</view>
			</view>
			<view class="img-box">
				<view class="tit">个人照片</view>
				<scroll-view class="welfare-box" scroll-x="true">
					<view class="img-item" v-for="(item, index) in user.member.boss_work_img" :key="index" @click="$imgPreview(item, index, host, user.member.boss_work_img)">
						<image mode="aspectFill" :src="`${host}/${item}`" :data-url="item"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<btnTpl @confirmEvent="nowMsgFn" v-if="id != timId">立即沟通</btnTpl>
	</view> 
</template>

<script>
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import {
		getHRCompanyDtlInfo
	} from '../../../apis/recruit/index.js'

	export default {
		data() {
			return {
				user: {},
				id: ''
			}
		},
		onLoad(options) {
			this.initDataFn(options.id);
			this.id = options.id
			this.timId = uni.getStorageSync('openId')
		},
		components: {
			btnTpl
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		methods: {
			initDataFn(id) {
				let _this = this;
				getHRCompanyDtlInfo({
					guid: id
				}).then(res => {
					res.code == 1 && (_this.user = res.data)
				})
			},
			nowMsgFn(e) {
				let _this = this;
				uni.navigateTo({
					url: '/pages/recruit/chat-box/index?id=C2C' + (_this.id) + 'gdx',
				})
			},
		}
	}
</script>

<style lang="less">
	.hr-box{
		padding-bottom: 200rpx;
	}
	.top-box {
		height: 462rpx;
		width: 100vw;
		padding: 109rpx 0 144rpx;
		text-align: center;

		image {
			width: 240rpx;
			height: 240rpx;
			margin: 0 auto;
			border-radius: 50%;
		}
	}

	.line {
		height: 6rpx;
		width: 60rpx;
		margin: 50rpx auto 0;
		background: #ccc;
	}

	.name {
		margin-top: 60rpx;
		text-align: center;
		font-size: 48rpx;
		color: #333;
		font-weight: bold;
		line-height: 48rpx;
	}

	.txt {
		margin-top: 30rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		line-height: 30rpx;
	}

	.img-box {
		background: #f8f8f8;
		white-space: nowrap;
		height: 568rpx;
		overflow: hidden;
		position: relative;
		margin-top: 30rpx;
	}

	.welfare-box {
		height: 348rpx;
		margin-top: 47rpx;
	}

	.img-item {
		display: inline-block;
		vertical-align: top;
		width: 272rpx;
		height: 348rpx;
		margin: 10rpx;

		image {
			max-width: 100%;
			height: 100%;
		}

	}

	.tit {
		margin-top: 108rpx;
		color: #333;
		font-size: 34rpx;
		font-weight: bold;
		text-indent: 30rpx;
	}
</style>
